<template>

  <div class="pad-20">
    <el-steps :active="activeNum" class="step-bar div-styls" finish-status="success" align-center>
      <el-step title="待配送"></el-step>
      <el-step title="待签收"></el-step>
      <el-step title="已签收"></el-step>
    </el-steps>
    <el-table  ref="multipleTable" :data="orderDetail" style="width: 100%" >
      <el-table-column min-width="35%" label="配送单信息">
        <template slot-scope="scope">
          <el-row>
            <el-col :span="5" class="align-r pad-r-10">配送单号：</el-col>
            <el-col :span="19">
              {{ scope.row.deliveryNo ||  '&nbsp;' }}
            </el-col>
            <el-col :span="5" class="align-r pad-r-10"> 生成时间：</el-col>
            <el-col :span="19">
              {{ scope.row.createTime ||  '&nbsp;' }}
            </el-col>
            <el-col :span="5" class="align-r pad-r-10"> 配送商品：</el-col>
            <el-col :span="19">
              共{{ scope.row.goodsNum ||  '0' }}件
            </el-col>
            <el-col :span="5" class="align-r pad-r-10"> 配送地址：</el-col>
            <el-col :span="19">
              {{ scope.row.deliveryAddress ||  '&nbsp;' }}
              <a href="javascript:;" @click="handleClipboard(scope.row.deliveryAddress, $event)"><span class="mar-l-10 font-blue">复制</span></a>
            </el-col>
          </el-row>
        </template>
      </el-table-column>
      <el-table-column min-width="35%" label="配送信息">
        <template slot-scope="scope">
          <div class="pad-t-5 pad-b-5">
            <el-row>
              <el-col :span="5" class="align-r pad-r-10">订单状态：</el-col>
              <el-col :span="19">
                <b class="font-26 pad-t-10 pad-b-10" :class="delivery.orderStatusColor">{{ dict.deliveryStatus[scope.row.deliveryStatus] ||  '&nbsp;' }}</b>
              </el-col>
              <el-col :span="5" class="align-r pad-r-10"> 发货时间：</el-col>
              <el-col :span="19">
                {{ scope.row.deliveryTime ||  '&nbsp;' }}
              </el-col>
              <el-col :span="5" class="align-r pad-r-10"> 团长签收时间：</el-col>
              <el-col :span="19">
                {{ scope.row.receiveTime ||  '&nbsp;' }}
              </el-col>
            </el-row>
          </div>
        </template>
      </el-table-column>
      <el-table-column min-width="30%" label="团长信息">
        <template slot-scope="scope">
          <el-row>
            <el-col :span="5" class="align-r pad-r-10">头像：</el-col>
            <el-col :span="19">
              <img :src="scope.row.memberAvatar" height="50px">
            </el-col>
            <el-col :span="5" class="align-r pad-r-10">昵称：</el-col>
            <el-col :span="19">
              {{ scope.row.memberNickname ||  '&nbsp;' }}
            </el-col>
            <el-col :span="5" class="align-r pad-r-10"> 姓名：</el-col>
            <el-col :span="19">
              {{ scope.row.memberRealName ||  '&nbsp;' }}
            </el-col>
            <el-col :span="5" class="align-r pad-r-10"> 手机：</el-col>
            <el-col :span="19">
              {{ scope.row.memberPhone ||  ' ' }}
            </el-col>
            <el-col :span="5" class="align-r pad-r-10"> 编号：</el-col>
            <el-col :span="19">
              {{ scope.row.commanderCode ||  ' ' }}
            </el-col>
          </el-row>
        </template>
      </el-table-column>
    </el-table>
    <el-tabs value="goodsInfo">
      <el-tab-pane label="商品信息" name="goodsInfo">
        <el-table ref="multipleTable" :data="deliveryDetails" style="width: 100%" >
          <el-table-column min-width="350px" label="订单信息" prop="goodsTitle">
            <template slot-scope="scope">
              <div class="flex v-align-c cursor-p">
                <label v-if="scope.row.goodsImageUrl"><img :src="scope.row.goodsImageUrl" class="mini-pic"></label>
                <div v-if="scope.row.goodsTitle" class="font-12 pad-l-10">
                  <div>{{scope.row.goodsTitle}}</div>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column width="180px" label="规格" prop="skuDetail" align="center">
            <template slot-scope="scope">
              <div class="font-blue">
                {{!scope.row.skuDetail ? '无' : scope.row.skuDetail}}
              </div>
            </template>
          </el-table-column>
          <el-table-column width="135px" label="数量" prop="goodsNum" align="center">
            <template slot-scope="scope">
              <div v-if="scope.row.goodsNum">
                <div>{{scope.row.goodsNum}}件</div>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="操作记录" name="logInfo">
        <el-table  ref="multipleTable" :data="orderLogList" style="width: 100%" >
          <el-table-column min-width="350px" label="操作内容" prop="operatorContent"></el-table-column>
          <el-table-column width="150px" label="操作人" prop="operatorName"></el-table-column>
          <el-table-column width="180px" label="操作时间" prop="createTime"></el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>

    <div class="pad-20" align="center">
      <el-button type="primary" @click="goDeliveryList">返回上一级</el-button>
      <el-button v-if="delivery.orderStatus == 10" type="primary" @click="updateDeliveryStatus(scope.row)">确认配送</el-button>
    </div>
  </div>

</template>

<style lang="less" scoped>
  .div-styls{
    margin-top: 30px;
    margin-bottom: 20px;
  }
  .mini-pic {
    width: 68px;
    height: 68px;
    display: block;
    padding: 1px;
    border: #efefef 1px solid;
  }
</style>

<script>
  import { getDictByGroupName } from '@/api/common/common'
  import { getMember } from '@/api/user/member'
  import { getDelivery } from '@/api/goods/delivery'
  import clipboard from '@/utils/clipboard'
  import elDragDialog from '@/directive/el-dragDialog'

  export default {
    directives: {
      // 拖动窗口
      elDragDialog
    },
    data() {
      return {
        delivery: {
          deliveryId: '',
          orderCode: '',
          orderStatus: '',
          orderStatusColor: 'font-pink'
        },
        deliveryDetails: [],
        orderLogList: [],
        member: {},
        dict: {
          deliveryStatus: {}
        },
        deliverOrder: {},
        orderDetail: [],
        activeNum: 1
      }
    },
    // 初始化页面
    created() {
      this.init()
    },
    mounted() {
    },
    methods: {
      handleClipboard(text, event) {
        clipboard(text, event)
      },
      init() {
        this.delivery.deliveryId = this.getCurrentPage().query.deliveryId
        getDictByGroupName('DeliveryDTO').then(response => {
          this.dict = response.data
        })
        if (this.delivery.memberId) {
          getMember(this.delivery.memberId).then(response => {
            if (response.isError) {
              return
            }
            this.member = response.data
          })
        }
        getDelivery(this.delivery.deliveryId).then(response => {
          if (response.isError) {
            return
          }
          this.delivery = response.data
          switch (this.delivery.deliveryStatus) {
            default:
            case 10:
              this.activeNum = 1
              this.delivery.orderStatusColor = 'font-pink'
              break
            case 20:
              this.activeNum = 2
              this.delivery.orderStatusColor = 'font-orange'
              break
            case 30:
              this.delivery.orderStatusColor = 'font-green'
              this.activeNum = 3
              break
          }
          this.orderDetail = []
          this.orderDetail.push(this.delivery)
          this.deliveryDetails = []
          const deliveryDetails = response.data.deliveryDetails
          deliveryDetails.forEach(orderGoods => {
            this.deliveryDetails.push(orderGoods)
          })
          // 订单日志
          this.orderLogList = response.data.orderLogList
        })
      },
      goDeliveryList() {
        this.$router.push({ path: '/order/delivery/index' })
      }
    }
  }

</script>
